<template>
  <div>
    <div class="table-tool">
      <el-button class="el-button--blue" type="primary" icon="el-icon-upload" @click="exportSchool">导出</el-button>
      <el-button class="el-button--blue" type="primary" icon="el-icon-plus" @click="addDialog.visible=true">添加</el-button>
      <el-button class="el-button--blue" type="primary" icon="el-icon-delete" @click="deleteSchool">删除</el-button>
    </div>
    <el-table ref="table_container" header-align="center" :data="data" stripe :height="tableHeight" v-loading="loading" @selection-change="handleSelectionChange" header-cell-class-name="table-header-cell" cell-class-name="table-cell">
      <el-table-column type="selection" fixed/>
      <el-table-column prop="provinceCityAreaName" label="省市区名称" width="150px"/>
      <el-table-column prop="experimentAreaName" label="实验区名称" width="150px"/>
      <el-table-column prop="name" label="学校名称" min-width="180px"/>
      <el-table-column prop="schoolType" label="学制" width="150px"/>
      <el-table-column prop="headmaster" label="校长姓名" width="150px"/>
      <el-table-column prop="headmasterPhone" label="校长电话" width="150px"/>
      <el-table-column prop="headmasterEmail" label="校长邮箱" width="150px"/>
      <el-table-column prop="contact" label="联系人" width="150px"/>
      <el-table-column prop="contactPhone" label="联系人电话" width="150px"/>
      <el-table-column prop="contactEmail" label="联系人邮箱" width="150px"/>
      <el-table-column prop="isStandout" label="是否示范学校" width="150px"/>
      <el-table-column prop="joinAt" label="加入时间" width="200px"/>
      <el-table-column prop="studentNum" label="学生人数" width="150px"/>
      <el-table-column prop="schoolCode" label="学校编码" width="150px"/>
      <el-table-column prop="code" label="编码" width="150px"/>
      <el-table-column prop="hasApply" label="是否有申请表" width="150px"/>
      <el-table-column prop="homepage" label="学校主页" width="150px"/>
      <el-table-column prop="officialAccounts" label="学校公众号" width="150px"/>
      <el-table-column prop="isExperiment" label="是否实验校授牌" width="150px"/>
      <el-table-column prop="experimentAt" label="实验校授牌时间" width="150px"/>
      <el-table-column prop="standoutAt" label="示范校授牌时间" width="150px"/>
      <el-table-column prop="contactAddress" label="联系地址" width="400px"/>
      <el-table-column align="center" label="操作" width="300px" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="roles.indexOf('admin')!==-1" class="text-button" type="text" icon="el-icon-refresh blue" @click="changePasswordDialogShow(scope.$index)">重置密码</el-button>
          <el-button class="text-button" type="text" icon="el-icon-edit blue" @click="changeInfoDialogShow(scope.$index)">修改信息</el-button>
          <el-button class="text-button" type="text" icon="el-icon-edit blue" @click="showSchoolOverview(scope.$index)">本校概览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="changeDialog.title" :visible.sync="changeDialog.visible" width="1200px">
      <school-change v-model="changeDialog"/>
    </el-dialog>
    <el-dialog :title="addDialog.title" :visible.sync="addDialog.visible" width="1200px">
      <school-add v-model="addDialog"/>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="changePasswordDialog.visible" width="30%">
      <el-form ref="passwordForm" :rules="passwordFormRules" :model="changePasswordDialog" label-width="80px">
        <el-form-item label="新密码" prop="password">
          <el-input type="password" class="width80" v-model="changePasswordDialog.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="changePasswordDialog.visible=false">取 消</el-button>
        <el-button type="primary" @click="submitChangePassword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { GetSchoolTable, GetSchoolExport } from '../../../api/table'
import { ParseChinese } from '../../../utils/date'
import schoolChange from '../dialog/school-change'
import schoolAdd from '../dialog/school-add'
import { SubmitSchoolDelete, CheckHasUserName, SubmitPasswordChange } from '../../../api/form'
export default {
  name: 'school',
  components: {
    schoolChange,
    schoolAdd
  },
  data () {
    return {
      tableHeight: '0px',
      pagination: {
        pageSize: 10,
        currentPage: 1
      },
      total: 0,
      data: [],
      loading: false,
      changeDialog: {
        title: '',
        visible: false,
        data: {
          id: '',
          name: '',
          schoolType: '',
          headmaster: '',
          headmasterPhone: '',
          headmasterEmail: '',
          contact: '',
          contactPhone: '',
          contactEmail: '',
          isStandout: '',
          joinAt: '',
          studentNum: '',
          schoolCode: '',
          code: '',
          hasApply: '',
          homepage: '',
          officialAccounts: '',
          isExperiment: '',
          experimentAt: '',
          standoutAt: '',
          contactAddress: ''
        }
      },
      addDialog: {
        title: '',
        visible: false
      },
      multipleSelection: [],
      changePasswordDialog: {
        visible: false,
        password: '',
        id: ''
      },
      passwordFormRules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleSizeChange (val) {
      this.pagination.pageSize = val
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
    },
    flashTable () {
      this.loading = true
      GetSchoolTable(this.pagination.pageSize, this.pagination.currentPage).then((res) => {
        this.total = res.data.total
        console.log(res.data.total)
        this.data = res.data.data
        this.loading = false
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    changeInfoDialogShow (index) {
      this.changeDialog.title = this.data[index].provinceCityAreaName + ' ' + this.data[index].experimentAreaName + ' ' + this.data[index].name
      this.changeDialog.data.id = this.data[index].id
      this.changeDialog.data.name = this.data[index].name
      this.changeDialog.data.schoolType = this.data[index].schoolType
      this.changeDialog.data.headmaster = this.data[index].headmaster
      this.changeDialog.data.headmasterPhone = this.data[index].headmasterPhone
      this.changeDialog.data.headmasterEmail = this.data[index].headmasterEmail
      this.changeDialog.data.contact = this.data[index].contact
      this.changeDialog.data.contactPhone = this.data[index].contactPhone
      this.changeDialog.data.contactEmail = this.data[index].contactEmail
      this.changeDialog.data.joinAt = ParseChinese(this.data[index].joinAt)
      this.changeDialog.data.studentNum = this.data[index].studentNum
      this.changeDialog.data.schoolCode = this.data[index].schoolCode
      this.changeDialog.data.code = this.data[index].code
      this.changeDialog.data.hasApply = this.data[index].hasApply === '是'
      this.changeDialog.data.homepage = this.data[index].homepage
      this.changeDialog.data.officialAccounts = this.data[index].officialAccounts
      this.changeDialog.data.isExperiment = (this.data[index].isExperiment === '是')
      this.changeDialog.data.isStandout = (this.data[index].isStandout === '是')
      this.changeDialog.data.experimentAt = ParseChinese(this.data[index].experimentAt)
      this.changeDialog.data.standoutAt = ParseChinese(this.data[index].standoutAt)
      this.changeDialog.data.contactAddress = this.data[index].contactAddress
      this.changeDialog.visible = true
    },
    deleteSchool () {
      SubmitSchoolDelete(this.multipleSelection).then(res => {
        this.multipleSelection = []
        this.$store.dispatch('SetFlash')
      })
    },
    showSchoolOverview (index) {
      window.open('#/school-overview/index/' + this.data[index].id)
    },
    reInitTableHeight () {
      if (document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop < 0) {
        setTimeout(this.reInitTableHeight, 10)
      } else if (document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop <= 500) {
        this.tableHeight = '500px'
      } else {
        this.tableHeight = document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop + 'px'
      }
    },
    changePasswordDialogShow (index) {
      CheckHasUserName(this.data[index].id, 'school').then((res) => {
        if (res.data.result) {
          this.changePasswordDialog.visible = true
          this.changePasswordDialog.id = res.data.id
          this.changePasswordDialog.password = ''
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    submitChangePassword () {
      SubmitPasswordChange(this.changePasswordDialog.id, this.changePasswordDialog.password).then((res) => {
        this.changePasswordDialog.visible = false
      })
    },
    exportSchool () {
      GetSchoolExport()
    }
  },
  mounted () {
    setTimeout(this.reInitTableHeight, 100)
  },
  computed: {
    ...mapGetters([
      'height',
      'provinceId',
      'cityId',
      'areaId',
      'joinYear',
      'schoolName',
      'schoolId',
      'flash',
      'roles'
    ])
  },
  watch: {
    height: function (val) {
      this.$nextTick(this.reInitTableHeight)
    },
    'pagination.currentPage': {
      handler () {
        this.flashTable()
      },
      immediate: true,
      deep: true
    },
    'pagination.pageSize': {
      handler () {
        this.flashTable()
      },
      immediate: true,
      deep: true
    },
    provinceId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    cityId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    joinYear: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    areaId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    schoolName: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    schoolId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    flash: function () {
      this.flashTable()
    }
  }
}
</script>

<style scoped>
  @import "../../../styles/common.css";
  .table-tool {
    width: 100%;
    padding: 15px 10px;
  }
  .width80 {
    width: 80%;
  }
</style>
